<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2022-09-23 16:33:50
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2022-10-13 12:22:34
 * @FilePath: /vue3-datav/src/App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue';
import { RouterView } from 'vue-router';
import { useFitStore } from '@/stores/fit';
const fitStore = useFitStore();
const screenAdapter = () => {
    fitStore.screenH = document.documentElement.clientHeight;
    fitStore.screenW = document.documentElement.clientWidth;
};
onMounted(() => {
    screenAdapter();
    window.addEventListener('resize', screenAdapter);
});
onBeforeUnmount(() => {
    window.removeEventListener('resize', screenAdapter);
});
</script>

<template>
    <div
        id="app-container"
        :style="{
            '--screen_height': fitStore.screenH,
            '--screen_width': fitStore.screenW
        }"
    >
        <RouterView />
    </div>
</template>

<style lang="scss" scoped>
#app-container {
    width: 100%;
    height: 100%;
    margin: 0;
}
</style>
